<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>欢乐大话骰</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    
    <!-- fonts -->
    <link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  	
    <div class="loader">
       <div>
        <img src="images/icons/preloader.gif" />
       </div>
    </div>
    
    <div class="container-fluid">
		<div class="row">
            <div class="col-sm-5 left-wrapper">
            	<div class="event-banner-wrapper">
                	<div class="logo">
                        <h1>摇!</h1>
                    </div>
                </div>
            </div>
        	
            <div class="col-sm-12 right-wrapper">
            	<div class="event-ticket-wrapper">
                    
                <div class="event-tab">
                
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="buyTicket">
                        <div class="row">
                          
                          <div id="wrapper">
                          
                          </div>

                        
                        <div id="footeet" style=" margin-top: 200px;" > </div>
                    </div>
                  </div>
                
                </div>
                
            <div class="cart">
                <span id="message" style="font-size:14px;color:orange"></span>
                <div class="row">
                    <div class="col-xs-12">
                        <ul>
                            <img src="./images/dydice/-1.gif" id='mydot0' style="width: 60px;height: 60px;">
                            <img src="./images/dydice/-1.gif" id='mydot1' style="width: 60px;height: 60px;">
                            <img src="./images/dydice/-1.gif" id='mydot2' style="width: 60px;height: 60px;">
                            <img src="./images/dydice/-1.gif" id='mydot3' style="width: 60px;height: 60px;">
                            <img src="./images/dydice/-1.gif" id='mydot4' style="width: 60px;height: 60px;">
                        </ul>
                    </div>
                   
                </div>
                <div class="row">
                	
                    

                    <div class="col-xs-4">
                    	<div class="text-middle">
                        	<a class="btn" id='openAll' onclick="openAllDots()">全开</a>
                        </div>
                    </div>
                    
                    <div class="col-xs-4">
                    	<div class="text-middle">
                        	<a class="btn" onclick="changeDots()" >重摇</a>
                        </div>
                    </div>
                    
                     <div class="col-xs-4">
                    	<div class="text-middle">
                    		<a class="btn" id='changeAll' onclick="changeAllDots()">全摇</a>
                        </div>
                    </div>
                    
<!--                      <div class="col-xs-3">
                    	<div class="text-middle">
                    		<a class="btn" id='next' onclick="next()">下一局</a>
                        </div>
                    </div> -->
                </div>
                </div>
                       
                </div>
            </div>
        </div>
    </div>

    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/allscript.js"></script>
  </body>
  
   <script type="text/javascript">
   var url = decodeURI(location.search).split("?")[1]
   let username = url.split('&')[0].split('=')[1]
   let room = url.split('&')[1].split('=')[1]
   let isCreate = url.split('&')[2].split('=')[1]
   let server = 'ws://129.204.145.42/dice/';
   let local = 'ws://192.168.0.15/dice/'
   let socket =server + username + '&'+room
   var websocket = null;
    // 判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        // 为了方便测试，故将链接写死
        websocket = new WebSocket(socket);
    } else{
        alert('Not support websocket')
    }

    // 连接发生错误的回调方法
    websocket.onerror = function(e){
    	alert('error:',e)
        setMessageInnerHTML("发生错误");
    };

    // 连接成功建立的回调方法
    websocket.onopen = function(event){
    	let msg = username+"&"+room+"&"+"inRoom";
    	websocket.send(msg)
        setMessageInnerHTML("打开连接");
    }

    // 接收到消息的回调方法
    websocket.onmessage = function(event){
    	let msg = event.data;
    	console.log(msg)
    	let type = msg.split('&')[0].split('=')[1]
    	if(type == 'txt'){
    		setMessageInnerHTML(msg.split('&')[1].split('=')[1])
    	}
    	
    	if(type == 'users'){
    		$('#wrapper').remove();
        	$('#footeet').before('<div id="wrapper"></div>')
    		let users = msg.split('&')[1].split('@');
    		for(let i=0;i<users.length-1;i++){
    			let ele = users[i].split(';');
    			createEl(ele[0],-1,-1,-1,-1,-1,'gif'); 
    		}
    	}
    	
    	if(type=='changeDot'){
    		let dots = msg.split('&')[2].split('=')[1].split(';');
    		for(let i=0;i<dots.length;i++){
    			$('#mydot'+i).attr('src',"./images/dydice/"+dots[i]+".gif")
    		}
    	}
    	
    	if(type == 'openAllDots'){
    		$('#wrapper').remove();
        	$('#footeet').before('<div id="wrapper"></div>')
    		let users = msg.split('&')[1].split('@');
    		for(let i=0;i<users.length-1;i++){
    			let ele = users[i].split(';');
    			createEl(ele[0],ele[1],ele[2],ele[3],ele[4],ele[5],'png');
    		}
    	}
    	
    	if(type == 'isOwner'){
    		let owner = msg.split('&')[1]
    		if(username != owner){
    			$('#openAll').attr('class','btn disabled')
    			$('#changeAll').attr('class','btn disabled')
    			//$('#next').attr('class','btn disabled')
    		}
    		let mydot = msg.split('&')[2].split(';')
    		for(let i=0;i<mydot.length-1;i++){
    			$('#mydot'+i).attr('src',"./images/dydice/"+mydot[i]+".gif")
    		}
    	}
    	
    	if(type == 'next'){
    		$('#wrapper').remove();
        	$('#footeet').before('<div id="wrapper"></div>')
        	let users = msg.split('&')[1].split('@');
    		for(let i=0;i<users.length-1;i++){
    			let ele = users[i].split(';');
    			createEl(ele[0],-1,-1,-1,-1,-1,'gif'); 
    		}
    	}
    	
    }

    // 连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("关闭连接");
    }

    // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
    window.onbeforeunload = function(){
    	console.log("close window")
        websocket.close();
    }

    // 将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML = innerHTML ;
    }

    // 关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    // 发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
    
    function changeDots(){
    	let msg = username+'&'+room+'&changeDot'
    	websocket.send(msg);
    }
    
    function openAllDots(){
    	let msg = username+'&'+room+'&openAllDots'
    	websocket.send(msg);
    }
    
    function changeAllDots(){
    	let msg = username+'&'+room+'&changeAllDot'
    	websocket.send(msg)
    }
    
    function next(){
    	let msg = username + '&' + room +'&next'
    	websocket.send(msg)
    }
    
    function createEl(user,dot1,dot2,dot3,dot4,dot5,type){
    	
    	var el = $(`<div class="col-md-6">
                            	<div class="ticketBox" >
                                	<div class="inactiveStatus"></div>
                                    
                                    <div class="row">
 			                       	<div class="col-xs-6" >
            							<div class="ticket-name">
            								${user}
                                        </div>
            						</div>
                                    
                                    </div>
                                    <div class="ticket-description">
                                        <ul>
                                            <img src="./images/dydice/${dot1}.${type}"   style="width: 60px;height: 60px;">
                                            <img src="./images/dydice/${dot2}.${type}"   style="width: 60px;height: 60px;">
                                            <img src="./images/dydice/${dot3}.${type}"   style="width: 60px;height: 60px;">
                                            <img src="./images/dydice/${dot4}.${type}"   style="width: 60px;height: 60px;">
                                            <img src="./images/dydice/${dot5}.${type}"   style="width: 60px;height: 60px;">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                          </div>`)
      
       $('#wrapper').append(el);
    }
</script>
</html>